<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
%>
<!doctype html>
<html lang="en" style="height: 100%;overflow: hidden">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>宁夏师范大学-财政支付系统</title>
    <link rel="icon" type="image/x-icon" href="<%=path%>/static/image/favicon.ico">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),url(<%=path%>/static/image/nybanner1.jpg);
            background-size: 100% 50%;
            background-repeat: no-repeat;
            background-position: center center;
            /*background-attachment: fixed;*/
            /*background-size:cover;*/
            /*-webkit-background-size: cover;*/
        }

        #login_area_div {
            z-index: 102;
            width: 600px;
            margin: 0 auto;
            padding-top: 400px;
            font-family: "Microsoft YaHei", SimSun, Arial, Helvetica, sans-serif;
        }
        .login_form_div{
            background: rgba(220, 220, 220, 0.5);
            padding-top: 10px;
            padding-left: 30px;
            padding-right: 30px;
            padding-bottom: 30px;
        }

        input{
            /*opacity: 0.3;*/
        }

        .footer {
            position: fixed; /*or前面的是absolute就可以用*/
            bottom: 30px;
            width: 320px;
            text-align: center;
        }
        .layui-form-pane .layui-form-label{
            border-radius: 4px 0 0 4px !important;
        }
        .layui-btn-normal{
            background-color: #004788 !important;
        }
        .footer-div{
            position: absolute;
            left: 0px;
            bottom: 0px;
            height: 80px;
            width: 100%;
            text-align: center;
            line-height: 80px;
            font-size: 15px;
            color: #FFFFFF;
        }
    </style>
    <link href="<%=path%>/static/layui/css/layui.css" rel="stylesheet"/>
    <script type="text/javascript" src="<%=path%>/static/jquery/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="<%=path%>/static/layui/layui.js"></script>
    <script type="text/javascript" src="<%=path%>/static/util/md5.js"></script>
</head>
<body style="height: 100%;">
<img src="<%=path%>/static/image/logox.png" style="position: absolute;left: 280px;top: calc(25% - 90px);z-index: 100;"/>
<div id="login_area_div" class="login_area_l_r">
    <div class="login_form_div">
        <div style="text-align: center;margin: 30px 0 30px 0;"><h1 style="color:#004788;">用户登录</h1></div>
        <form id="login_form" class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-username"></i></label>
                <div class="layui-input-block">
                    <input id="czyCode" name="czyCode" type="text" required lay-verify="required"
                           placeholder="请输入用户名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-password"></i></label>
                <div class="layui-input-block">
                    <input id="password" name="password" type="password" required
                           lay-verify="required" placeholder="请输入登录密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"><i class="layui-icon layui-icon-vercode"></i></label>
                <div class="layui-input-block">
                    <input id="captcha" name="code" type="text" required
                           lay-verify="required" placeholder="请输入验证码" class="layui-input" style="width: calc(100% - 120px);padding: 0px;float: left">
                    <img src="${captcha}"/>
                </div>
            </div>
            <input type="hidden" id="captchaId" name="captchaId" value="${captchaId}" />
            <button class="layui-btn layui-btn-fluid layui-btn-normal" type="button" onClick="login()">登&emsp;录</button>
            <br/><br/>
        </form>
    </div>
</div>
</body>
<script type="text/javascript">
    let layer = layui.layer;

    window.onload = function () {
        let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        let isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
        if (isIE) {
            let reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            let fIEVersion = parseFloat(RegExp["$1"]);
            if (fIEVersion <= 7) {
                window.location = "error.jsp";
            }
        }

        $("#password").keydown(function (event) {
            if (13 == event.keyCode) {
                login();
            }
        })

        $("#captcha").keydown(function (event) {
            if (13 == event.keyCode) {
                login();
            }
        })
    }

    function login() {
        let czyCode = $("#czyCode").val();
        let password = $("#password").val();
        let captcha = $("#captcha").val();
        let captchaId = $("#captchaId").val();
        if(czyCode == '' || czyCode == null || czyCode == undefined){
            layer.msg('登录名不能为空！', {offset: 't'});
            return false;
        }
        if(password == '' || password == null || password == undefined){
            layer.msg("密码不能为空！", {offset: 't'});
            return false;
        }
        if(captcha == '' || captcha == null || captcha == undefined){
            layer.msg("验证码不能为空！", {offset: 't'});
            return false;
        }
        let ts = new Date().getTime();
        let mac = md5(md5(password) + ts);
        let json = {
            czyCode: czyCode,
            password: mac,
            ts: ts,
            captcha: captcha,
            captchaId: captchaId
        };
        $.ajax({
            type: "post",
            url: "<%=path%>/login/login",
            data: json,
            async: true,
            cache: false,
            success: function (data) {
                if (data.code == 200) {
                    // 登陆成功
                    window.location = "<%=path%>/login/main.html";
                } else {
                    layer.msg(data.message, {offset: 't'});
                    window.location.reload();
                }
            }
        });
    }
</script>
</html>
